<template>
	<view>
		<list-item v-for="(item, index) in carList" :key="index" :item="item">
			<template #word>
				<uni-number-box :min="1" :value="item.count" @change="handleChanageCount($event, item.id)" />
			</template>

			<template #preLeft>
				<label>
					<radio :checked="item.state" @click="handleChangeState(item.id)"></radio>
				</label>
			</template>
		</list-item>

		<view class="btm">
			<view class="left">
				<radio :checked="totalState" @click="changeAllState(!totalState)"/><text>全选</text>
			</view>
			<view class="right">
				<text>总价：{{ totalPrice.toFixed(2) }}</text>
				<button type="primary" size="mini">立即付款</button>
			</view>


		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	import CarMixins from '../../mixins/car-mixins.js'
	export default {
		mixins: [CarMixins],
		computed: {
			...mapState('car', ['carList']),
			...mapGetters('car', ['totalState', 'totalPrice', 'totalCount'])
		},
		methods: {
			...mapMutations('car', ['changeCount', 'changeState', 'changeAllState']),
			handleChanageCount(count, id) {
				this.changeCount({
					id,
					count
				})
			},
			handleChangeState(id) {
				this.changeState({
					id
				})
			}
		}
	}
</script>

<style lang="scss">
	.btm {
		display: flex;
		justify-content: space-between;
		padding: 0 10rpx;
		align-items: center;
		height: 100rpx;
		position: fixed;
		/* #ifdef H5 */ 
		bottom: 100rpx;
		/* #endif */ 
		/* #ifdef MP-WEIXIN */ 
		bottom: 0;
		/* #endif */ 
		width: 100%;
		background-color: white;
		.right {
			display: flex;
			align-items: center;

			text {
				color: red;
				font-weight: bold;
			}
			button {
				background-color: skyblue;
			}
		}
	}
</style>